<template>
	<view class="leave_box">
    <navTitle :title="'統計詳情'"></navTitle>
    <!-- <view class="s-title">
      <view class="s-t-l">
        <view v-for="(item,index) in dateList" @tap="changeDate(item,index)" :class="index==dateIndex?'active':''" :key="index">{{ item }}</view>
      </view>
      <view class="s-t-r">
        <img src="/static/images/boss/icon_b_arrow_left.png" mode="scaleToFill" alt="">
        <view>08.12-08.18</view>
        <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
      </view>
    </view> -->
    <view class="li-wrap">
      <uni-datetime-picker type="range" v-model="rangDate" @change="changeCalendar" />
    </view>
    <view class="li-wrap">
      <view class="li-p">
        <view class="l-p-l">平均工時 {{statisticsData?statisticsData.average_workhour.value:0}}小時</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" v-show="false" alt="">
      </view>
    </view>
    <view class="li-wrap">
      <view class="li-p" @tap="changeSub('出勤')">
        <view class="l-p-l">出勤天數 {{statisticsData?statisticsData.attendance_days.value:0}}天</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" :class="chuqinState==1?'active':''" alt="">
      </view>
      <view class="li-sub" v-for="(item,index) in chuqinList" :key="index" v-if="chuqinState==1">
        <view class="sub-l">{{item.date}}</view>
        <view class="sub-r">
          <view>{{item.weekday}}天</view>
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
    </view>
    <view class="li-wrap">
      <view class="li-p" @tap="changeSub('休息')">
        <view class="l-p-l">休息天數 {{statisticsData?statisticsData.holiday.value:0}}天</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" :class="xiuxiState==1?'active':''" mode="scaleToFill" alt="">
      </view>
      <view class="li-sub" v-for="(item,index) in xiuxiList" :key="index" v-if="xiuxiState==1">
        <view class="sub-l">{{item.date}}</view>
        <view class="sub-r">
          <view>{{item.weekday==1?'星期一':item.weekday==2?'星期二':item.weekday==3?'星期三':item.weekday==4?'星期四':item.weekday==5?'星期五':item.weekday==6?'星期六':item.weekday==7?'星期日':''}}</view>
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
    </view>
    <view class="li-wrap">
      <view class="li-p" @tap="changeSub('迟到')">
        <view class="l-p-l">遲到 {{statisticsData?statisticsData.chidao.value:0}}次</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" :class="chidaoState==1?'active':''" mode="scaleToFill" alt="">
      </view>
      <view class="li-sub" v-for="(item,index) in chidaoList" :key="index" v-if="chidaoState==1">
        <view class="sub-l">{{item.date}}</view>
        <view class="sub-r">
          <view>{{item.weekday}}天</view>
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
    </view>
    <view class="li-wrap">
      <view class="li-p" @tap="changeSub('早退')">
        <view class="l-p-l">早退 {{statisticsData?statisticsData.zaotui.value:0}}次</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" :class="zaotuiState==1?'active':''" mode="scaleToFill" alt="">
      </view>
      <view class="li-sub" v-for="(item,index) in zaotuiList" :key="index" v-if="zaotuiState==1">
        <view class="sub-l">{{item.date}}</view>
        <view class="sub-r">
          <view>{{item.count}}次</view>
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
    </view>
    <!-- <view class="li-wrap">
      <view class="li-p">
        <view class="l-p-l">缺卡 {{statisticsData?statisticsData.holiday.value:0}}次</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt="">
      </view>
    </view> -->
    <!-- <view class="li-wrap">
      <view class="li-p">
        <view class="l-p-l">曠工 {{statisticsData?statisticsData.holiday.value:0}}天</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt="">
      </view>
    </view> -->
    <view class="li-wrap">
      <view class="li-p" @tap="changeSub('外勤')">
        <view class="l-p-l">外勤 {{statisticsData?statisticsData.waiqin.value:0}}次</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" :class="waiqinState==1?'active':''" mode="scaleToFill" alt="">
      </view>
      <view class="li-sub" v-for="(item,index) in waiqinList" :key="index" v-if="waiqinState==1">
        <view class="sub-l">{{item.date}}</view>
        <view class="sub-r">
          <view>{{item.weekday}}天</view>
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
    </view>
    <!-- <view class="li-wrap">
      <view class="li-p">
        <view class="l-p-l">加班 {{statisticsData?statisticsData.holiday.value:0}}小時</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" mode="scaleToFill" alt="">
      </view>
    </view> -->
    <view class="li-wrap">
      <view class="li-p" @tap="changeSub('请假')">
        <view class="l-p-l">請假 {{statisticsData?statisticsData.ask_leave.value:0}}小時</view>
        <img src="/static/images/boss/icon_b_arrow_down.png" :class="qingjiaState==1?'active':''" mode="scaleToFill" alt="">
      </view>
      <view class="li-sub" v-for="(item,index) in qingjiaList" :key="index" v-if="qingjiaState==1">
        <view class="sub-l" style="flex:3;">{{item.begin_time}}-{{ item.end_time }}</view>
        <view class="sub-r" style="flex:.5;">
          <view>{{item.hours}}{{ item.hours_unit==1?'天':'小时' }}</view>
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import navTitle from './components/nav-title.vue';
import {attendanceStatistics} from '../../utils/userApi'
export default {
	components: {navTitle},
	data() {
		return {
      rangDate:[],
      dateIndex:0,
      dateList:['月','周'],
      checkedOut:false,
      statisticsData:null,
      xiuxiState:0,
      xiuxiList:[],
      chuqinState:0,
      chuqinList:[],
      waiqinState:0,
      waiqinList:[],
      zaotuiState:0,
      zaotuiList:[],
      chidaoState:0,
      chidaoList:[],
      qingjiaState:0,
      qingjiaList:[],
		};
	},
	props: {
	},
	computed: {},
  onShow() {
  },
	methods: {
    changeCalendar(e){
      if(e.length==2){
        this.getAttendanceStatistics(e[0],e[1])
      }
    },
    async getAttendanceStatistics(start,end){
      let res=await attendanceStatistics({start_date:start,end_date:end})
      if(res.code==1){
        this.statisticsData=res.data
        this.chuqinList=res.data.attendance_days.list
        this.xiuxiList=res.data.holiday.list
        this.chidaoList=res.data.chidao.list
        this.zaotuiList=res.data.zaotui.list
        this.waiqinList=res.data.waiqin.list
        this.qingjiaList=res.data.ask_leave.list
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        })
      }
    },
    changeDate(item,index){
      this.dateIndex=index
    },
    changeSub(type){
      if(type=='休息'){//休息
        this.xiuxiState=1-this.xiuxiState
      }else if(type=='出勤'){//出勤
        this.chuqinState=1-this.chuqinState
      }else if(type=='迟到'){//迟到
        this.chidaoState=1-this.chidaoState
      }else if(type=='早退'){//早退
        this.zaotuiState=1-this.zaotuiState
      }else if(type=='外勤'){//迟到
        this.waiqinState=1-this.waiqinState
      }else if(type=='请假'){//迟到
        this.qingjiaState=1-this.qingjiaState
      }
    }
	}
};
</script>
<style lang="scss" scoped>
.leave_box{
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: #F4F6FA;
}
.s-title{
  width: calc(100% - 40px);
  padding: 10px;
  margin: 10px auto 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 10px;
}
.s-t-l{
  width: 40%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  view{
    width: 54px;
    height: 38px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 15px;
    color: #333333;
    line-height: 38px;
    text-align: center;
  }
  view.active{
    background: #1C7AF7;
    color: #fff
  }
}
.s-t-r{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
  img{
    width: 8px;
    height: 14px;
  }
  view{
    width: calc(100% - 24px);
    text-align: center;
  }
}
.li-wrap{
  width: calc(100% - 20px);
  margin: 10px auto 10px;
  border-radius: 10px;
  background: #FFFFFF;
  .li-sub{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 15px 10px;
  }
  .li-sub:last-child{
    border-radius: 0 0 10px 10px;
  }
}
.li-p{
  width: calc(100% - 20px);
  padding: 0 10px;
  display: flex;
  height: 46px;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0px 4px 6px 0px rgba(228,228,228,0.5);
  img{
    width: 14px;
    height: 9px;
    display: block;
  }
  img.active{
    transform: rotate(-90deg);
  }
}
.sub-l{
  flex: 1;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
}
.sub-r{
  flex: 1;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  img{
    width: 6px;
    height: 10px;
    margin-left: 10px;
  }
}
</style>
